import { View, Text, Image, ScrollView, Button } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import { useState } from 'react'
import './index.scss'
import FloatLoginBar from '../../components/common/FloatLoginBar'

export default function Cart() {
  useLoad(() => {
    console.log('Cart page loaded.')
  })

  // 购物车为空状态
  const [isEmpty, setIsEmpty] = useState(true)
  
  // 当前位置
  const [location, setLocation] = useState('崔各庄')

  return (
    <View className='cart-container'>
      {/* 顶部栏 */}
      <View className='header'>
        <View className='header-left'>
          <Text className='location-icon'>📍</Text>
          <Text className='location-text'>{location}</Text>
          <Text className='location-arrow'>▼</Text>
        </View>
        <View className='header-right'>
          <Text className='header-btn'>导出</Text>
          <Text className='header-btn'>管理</Text>
        </View>
      </View>

      {/* 分隔线 */}
      <View className='divider'></View>

      {/* 主内容区域 */}
      <ScrollView className='content' scrollY>
        {isEmpty ? (
          <View className='empty-cart'>
            <Text className='empty-text'>你的购物车空空如也</Text>
          </View>
        ) : (
          <View className='cart-items'>
            {/* 这里将来会展示购物车中的商品 */}
          </View>
        )}
      </ScrollView>

      {/* 底部结算区 */}
      <View className='footer'>
        {/* 将来添加结算区内容 */}
      </View>

      <FloatLoginBar />
    </View>
  )
} 